// 获取学生数据并渲染表格
function getStudent() {
    axios.get('/students').then(result => {
        let data = result.data.data
        // console.log(data)
        let str = ''
        data.forEach(item => {
            // 0 是false
            item.gender = item.gender ? '女' : '男'
            str += ` <tr>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.gender}</td>
                        <td>第${item.group}组</td>
                        <td>${item.hope_salary}</td>
                        <td>${item.salary}</td>
                        <td>${item.province} ${item.city} ${item.area}</td>
                        <td>
                        <a href="javascript:;" class="text-success mr-3 "><i class="bi bi-pen" data-id ="${item.id}"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id ="${item.id}"></i></a>
                        </td>
                    </tr>`
        });
        document.querySelector('.list').innerHTML = str
        document.querySelector('.total').innerHTML = data.length
    })
}
getStudent()

// 删除 修改 数据
document.querySelector('.list').addEventListener('click', function (e) {
    // console.log(e.target.className)

    // ==========判断点击的是否是删除
    // if (e.target.className === 'bi bi-trash') {
    if (e.target.classList.contains('bi-trash')) {  //判断当前元素是否包含bi-trash类包含返回true
        // console.log(111)
        console.log(e.target.dataset.id)
        axios.delete(`/students/${e.target.dataset.id}`).then(result => {
            console.log(111)
            getStudent()
        })
    }

    // ==========判断点击的是否是修改
    if (e.target.classList.contains('bi-pen')) {
        // 点击修改，修改标题
        document.querySelector('h5.modal-title').innerHTML = '修改学员'
        // 添加自定义属性 id 方便后面修改
        document.querySelector('h5.modal-title').setAttribute('data-id', e.target.dataset.id)
        // 点击修改之后获取这一条数据的信息回填到表格
        axios.get(`/students/${e.target.dataset.id}`).then(result => {
            // console.log(result.data.data)
            let data = result.data.data
            // 处理省市县（省默认就有
            axios.get('/api/city', {
                params: {
                    pname: data.province
                }
            }).then(result => {
                let str = '<option value="">--城市--</option>'
                result.data.data.forEach(item => {
                    str += `<option value="${item}">${item}</option>`
                });
                citys.innerHTML = str
                // 获取市之后获取县
                axios.get('/api/area', {
                    params: {
                        pname: data.province,
                        cname: data.city
                    }
                }).then(result => {
                    let str = '<option value="">--地区--</option>'
                    result.data.data.forEach(item => {
                        str += `<option value="${item}">${item}</option>`
                    });
                    areas.innerHTML = str
                    // val(表单，数据)  表示设置表单默认值
                    val(document.querySelector('#form'), data)
                })
            })

        })
        modal.show()

    }
    document.querySelector('#submit').addEventListener('click', function () {

    })
})
// -----------------------------初始化省市县--------------------
let citys = document.querySelector('[name="city"]')
let areas = document.querySelector('[name="area"]')
let provinces = document.querySelector('[name="province"]')
const initCity = () => {
    // 完成省市县的联动效果
    // 马上获取省
    // 省

    axios.get('/api/province').then(result => {
        let str = '<option value="">--省份--</option>'
        result.data.data.forEach(item => {
            str += `<option value="${item}">${item}</option>`
        });
        provinces.innerHTML = str
    })
    // 切换省后获取市 重置县

    provinces.addEventListener('change', function () {
        areas.innerHTML = '<option value="">--地区--</option>'
        axios.get('/api/city', {
            params: {
                pname: provinces.value
            }
        }).then(result => {
            // console.log(result.data.data)
            let str = '<option value="">--城市--</option>'
            result.data.data.forEach(item => {
                str += `<option value="${item}">${item}</option>`
            });
            citys.innerHTML = str
        })
    })
    // 添加市后获取县

    citys.addEventListener('change', function () {
        axios.get('/api/area', {
            params: {
                pname: provinces.value,
                cname: citys.value
            }
        }).then(result => {
            // console.log(result.data.data)
            let str = '<option value="">--地区--</option>'
            result.data.data.forEach(item => {
                str += `<option value="${item}">${item}</option>`
            });
            areas.innerHTML = str
        })
    })
}
initCity()
// -----------------------------模态框--------------------
// 找到模态框哪个div
let modalBox = document.querySelector('.modal')
let modal = new bootstrap.Modal(modalBox)
// 让模态框显示
// modal.show()
// modal.hide()
// =================================添加操作
document.querySelector('#openModal').addEventListener('click', function () {
    // 点击添加操作重置表单
    document.querySelector('form').reset()
    // 修改标题
    document.querySelector('h5.modal-title').innerHTML = '添加学员'
    modal.show()
})
// ----------------------------- 点击确认，完成数据的提交（可能是添加，可能是修改） ---------------------------

document.querySelector('#submit').addEventListener('click', function () {
    // 按钮是button类型，不会触发表单提交，不需要阻止默认行为
    let data = val(document.querySelector('form'))
    // 接口要求以下数据必须是数字类型
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    // console.log(data);
    //    点击确认 判断是添加还是修改操作
    if (document.querySelector('h5.modal-title').innerHTML === '修改学员') {
        axios.put(`/students/${document.querySelector('h5.modal-title').dataset.id}`, data).then(result => {
            getStudent()
            modal.hide()
        })
    } else if (document.querySelector('h5.modal-title').innerHTML === '添加学员') {
        axios.post('/students', data).then(result => {
            console.log(result.data);
            getStudent()
            modal.hide()
        })
    }
})
// ==========================处理用户名和退出
document.querySelector('.mb-0.text-sm.font-weight-bold').innerHTML = localStorage.getItem('user-name')
// 退出和登录要做的事情相反
document.querySelector('#logout').addEventListener('click', function () {
    // 清除本地存储中的 user-name，user-token
    localStorage.removeItem('user-name')
    localStorage.removeItem('user-token')
    // 退出=> 跳转到登录页面
    location.href = './login.html'
})